<template>
  <div class="ds-wrap absolute inset-0 w-full h-full">
    <ds-icon class="absolute z-10 w-5 h-5 right-5 top-3 cursor-pointer text-white" :name="icon" @click="onToggle" />
    <ds-time v-if="Config.datetime" :format="Config.datetime.format" />
    <ds-logo />
    <ds-head :title="Config.title" />
    <ds-body />
    <ds-foot />
  </div>
</template>

<script lang="ts">
import {defineComponent, ref, provide, inject, onMounted} from 'vue';
import DsHead from './components/DsHead.vue';
import DsFoot from './components/DsFoot.vue';
import DsBody from './components/DsBody.vue';
import DsLogo from './components/DsLogo.vue';
import DsTime from './components/DsTime.vue';
import DsIcon from './components/DsIcon.vue';

export default defineComponent({
  name: 'App',
  components: {
    DsIcon,
    DsTime,
    DsLogo,
    DsBody,
    DsFoot,
    DsHead
  },
  setup() {
    const Config = inject('Config')
    const icon = ref<string>('fullscreen')
    const onToggle = () => {
      if (!document.fullscreenElement) {
        document.documentElement.requestFullscreen().then(() => {
          icon.value = 'fullscreen-exit'
        })
      } else {
        document.exitFullscreen();
        icon.value = 'fullscreen'
      }
    }
    provide('fullscreen', icon)
    onMounted(() => {
      document.documentElement.addEventListener('fullscreenchange', () =>{
        if (!document.fullscreenElement) {
          icon.value = 'fullscreen'
        }
      })
    })
    return {
      Config,
      icon,
      onToggle
    }
  }
})
</script>
<style lang="scss" scoped>
.ds-wrap {
  min-width: 1200px;
  background: url("./assets/images/1/bg.png") 0 center;
  background-size: 100% 100%;
}
</style>
